<template>
    <div flex class="content">
        <base-layout :isPage="true" @onFixedBtn="onFixedBtn" :showTitle="false" :fixedButtonList="fixedButtonList"
            :fixedButton="true" :defaultButtonSwitch="false" ref="layout" @pageChange="onPageChange">
            <div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
                <base-table :border="true" :showIndex="false" :slotrow="false" style="overflow-x: auto;"
                    :tableHeight="tableHeight" :tabLoading.sync="tabLoading" :tableData="tableData"
                    :tableColumn="tableColumn" ref="tableData">
                    <template v-slot:planDate="{ row }">
                        <span>{{ row.planDate | getDate }}</span>
                    </template>
                    <template v-slot:createDate="{ row }">
                        <span>{{ row.createDate | getDate }}</span>
                    </template>
                </base-table>
            </div>
        </base-layout>
        <base-dynamic-column ref="baseDynamicColumn" :id="169"></base-dynamic-column>
    </div>
</template>
<script>
// 组件
import baseLayout from '@/components/base/baseLayout'
import baseTable from '@/components/base/baseTable'
import baseDialog from '@/components/base/BaseNewDialog'
import baseDynamicColumn from '@/components/base/baseDynamicColumn'
import { dataDictionaryGetBillList } from "@/api/apis/dataDictionary";
import { planSave, planList, myPlanList } from "@/api/apis/myJob";
import { GetDataSourcePerson, } from "@/api/apis/documentManagement";

export default {
    components: {
        baseLayout, baseTable, baseDialog, baseDynamicColumn
    },
    data() {
        return {
            fixedButtonList: [
                {
                    icon: 'el-icon-s-operation',
                    title: '筛选'
                }
            ],
            pageModel: {//分页
                limit: 20,
                page: 1
            },
            tableColumn: null,
            //     [
            //     {
            //         label: "日期",
            //         prop: "planDate",
            //         tooltip: true,
            //     },
            //     {
            //         label: "计划内容",
            //         prop: "planContent",
            //         tooltip: true,
            //     },
            // ],
            items: [],
            tableData: [],//表数据
            tabLoading: false,
            //
        };
    },
    mounted() {
        this.init()
    },
    filters: {
        getDate(value) {
            if (!value) {
                return ''
            }
            return value.split('T')[0]
        },
    },
    methods: {
        // 页面初始化
        init() {
            // this.getDate()
            this.GetBillList();
        },

        onFixedBtn(item) {
            if (item.title == "筛选") {
                this.$refs.baseDynamicColumn.screen = true
                this.$refs.baseDynamicColumn.init()
            }
        },
        //列表
        async GetBillList() {
            this.tabLoading = true;
            let params = {
                ...this.pageModel,
                Sequence: "descending",
                SequenceName: "planDate",
            }
            const res = await planList(params);
            if (res.code == 1) {
                this.$refs.layout.setPageTotal(res.data[0]);
                this.tableData = res.data[1];
                this.tabLoading = false;
            }
            const el = await GetDataSourcePerson({ billKindID: '169' })
            if (el.code == 1) {
                this.tableColumn = el.data[1].length == 0 ? el.data[0] : el.data[1]
                this.tableColumn.forEach(el => {
                    el.tooltip = true
                });
            }
        },
        //我的计划列表
        async myPlanList() {
            // this.tabLoading = true;
            let params = {
                ...this.pageModel,
                Sequence: "descending",
                SequenceName: "planDate",
                startDate: this.items[0].date, //开始时间（我的计划看板默认本周周一）
                endDate: this.items[6].date //结束时间（我的计划看板默认本周周日）
            }
            const res = await myPlanList(params);
            if (res.code == 1) {
                this.tableData = res.data[1];
                // console.log(res);
            }
            const el = await GetDataSourcePerson({ billKindID: '169' })
            if (el.code == 1) {
                this.tableColumn = el.data[1].length == 0 ? el.data[0] : el.data[1]
                this.tableColumn.forEach(el => {
                    el.tooltip = true
                });
            }

        },
        getDate() {
            const today = new Date();
            const currentDayOfWeek = today.getDay();
            const daysOffset = currentDayOfWeek - 1;
            const firstDayOfWeek = new Date(today.getTime() - daysOffset * 24 * 60 * 60 * 1000);
            for (let i = 0; i < 7; i++) {
                const date = new Date(firstDayOfWeek.getTime() + i * 24 * 60 * 60 * 1000);
                this.items[i].date = this.formatDate(date); // 格式化日期为 "yyyy-MM-dd"
            }
        },
        formatDate(value, type) {
            // 计算日期相关值
            let time = typeof value == 'number' ? new Date(value) : value;
            let Y = time.getFullYear();
            let M = time.getMonth() + 1;
            let D = time.getDate();
            // 如果传递了type的话
            if (type == undefined) {
                return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D);
            }
        },
        // 分页
        onPageChange(model) {
            this.pageModel.page = model.page;
            this.pageModel.limit = model.limit;
            this.GetBillList()
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    padding: 0 10px;

}
</style>